<template>
  <view class="container">
    <!-- 顶部用户信息 -->
    <view class="user-info-box">
      <view class="flex align-center justify-between padding-tb-sm padding-lr">
        <view class="flex align-center">
          <view class="cu-avatar round lg" style="background-color: #8a6d3b;">
            <text class="avatar-text">晓</text>
          </view>
          <view class="margin-left">
            <text class="username">晓晓</text>
          </view>
        </view>
        <view>
          <text class="cuIcon-settings"></text>
        </view>
      </view>
      
      <!-- 订单统计 - 修改为更简洁的布局 -->
      <view class="order-stats text-center padding-lr">
        <view class="flex numbers-row justify-around">
          <view class="stats-num">30</view>
          <view class="stats-num">30</view>
          <view class="stats-num">30</view>
        </view>
        <view class="stats-labels flex justify-around">
          <text class="label-item">本月订单</text>
          <text class="label-item">交易中</text>
          <text class="label-item">交易完成</text>
        </view>
      </view>
      
      <!-- 当月销售总额 -->
      <view class="sales-box text-center padding-bottom">
        <view class="sales-title">当月销售总额</view>
        <view class="sales-amount">666,66.00</view>
      </view>
    </view>
    
    <!-- 货物服务1 -->
    <view class="service-box margin-top">
      <view class="service-title padding-sm">货物服务</view>
      <view class="service-grid flex justify-around">
        <view class="service-item flex flex-direction justify-center align-center">
            <image class="service-icon" src="/static/my/cjjl.svg" mode="aspectFit"></image>
          <text class="service-text text-blue">成交记录</text>
        </view>
        <view class="service-item flex flex-direction justify-center align-center">
          <image class="service-icon" src="/static/my/thjl.svg" mode="aspectFit"></image>
          <text class="service-text text-blue">提货记录</text>
        </view>
        <view class="service-item flex flex-direction justify-center align-center">
          <image class="service-icon" src="/static/my/shjl.svg" mode="aspectFit"></image>
          <text class="service-text text-blue">收货记录</text>
        </view>
        <view class="service-item flex flex-direction justify-center align-center">
          <image class="service-icon" src="/static/my/wddp.svg" mode="aspectFit"></image>
          <text class="service-text text-blue">我的店铺</text>
        </view>
      </view>
    </view>
    
    <!-- 货物服务2 -->
    <view class="service-box margin-top">
      <view class="service-title padding-sm">货物服务</view>
      <view class="service-grid flex justify-around">
        <view class="service-item flex flex-direction justify-center align-center">
          <image class="service-icon-2" src="/static/my/bjbt.svg" mode="aspectFit"></image>
          <text class="service-text text-blue">保价补贴</text>
        </view>
        <view class="service-item flex flex-direction justify-center align-center">
          <image class="service-icon-2" src="/static/my/ydhk.svg" mode="aspectFit"></image>
          <text class="service-text text-blue">预定货款</text>
        </view>
        <view class="service-item flex flex-direction justify-center align-center">
          <image class="service-icon-2" src="/static/my/kthk.svg" mode="aspectFit"></image>
          <text class="service-text text-blue">可提货款</text>
        </view>
        <view class="service-item flex flex-direction justify-center align-center">
          <image class="service-icon-2" src="/static/my/szmx.svg" mode="aspectFit"></image>
          <text class="service-text text-blue">收支明细</text>
        </view>
      </view>
    </view>
    
    <!-- 系统服务 -->
    <view class="service-box margin-top">
      <view class="service-title padding-sm">系统服务</view>
      <view class="system-menu">
        <view class="cu-item arrow">
          <view class="content">
            <text class="cuIcon cuIcon-phone text-black"></text>
            <text class="text-black">隐私政策</text>
          </view>
        </view>
        <view class="cu-item arrow">
          <view class="content">
            <text class="cuIcon cuIcon-file text-black"></text>
            <text class="text-black">用户协议</text>
          </view>
        </view>
        <view class="cu-item arrow">
          <view class="content">
            <text class="cuIcon cuIcon-phone text-black"></text>
            <text class="text-black">联系我们</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f6f6f6;
  padding-bottom: 100rpx;
}

.user-info-box {
  background-image: url('../../static/my.svg');
  background-size: cover;
  background-position: center;
  color: #c4a96a;
  position: relative;
  overflow: hidden;
  
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,0 C50,40 50,60 100,100" stroke="#333" fill="none" stroke-width="0.5" /></svg>');
    opacity: 0.1;
    z-index: 0;
  }
}

.username {
  font-size: 36rpx;
  color: #c4a96a;
}

.avatar-text {
  color: #fff;
}


.numbers-row {
  width: 100%;
  margin-bottom: 5rpx;
}

.stats-num {
  font-size: 50rpx;
  font-weight: bold;
  color: #c4a96a;
  padding: 0;
}

.stats-labels {
  width: 100%;
  font-size: 24rpx;
  color: #c4a96a;
}

.label-item {
  display: inline-block;
  width: 33.3%;
  text-align: center;
}

.sales-box {
  margin:  30rpx 0;
}

.sales-title {
  font-size: 28rpx;
  color: #c4a96a;
}

.sales-amount {
  font-size: 60rpx;
  font-weight: bold;
  color: #c4a96a;
  margin-top: 10rpx;
}

.service-box {
  background-color: #ffffff;
  transform: translateY(-60rpx);
  border-radius: 10rpx;
  overflow: hidden;
  margin: 20rpx;
}

.service-title {
  font-size: 30rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #f0f0f0;
}

.service-grid {
  padding: 20rpx 0;
}

.service-item {
  padding: 15rpx 0;
  width: 25%;
  text-align: center;
}

.service-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #f7f1e3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
}

.service-icon-2 {
  width: 60rpx;
  height: 60rpx;
  background-color: none;
  margin-bottom: 15rpx;
}

.service-icon image {
  width: 40rpx;
  height: 40rpx;
}

.service-icon.brown text {
  color: #8a6d3b;
  font-size: 48rpx;
}

.service-text {
  font-size: 26rpx;
  color: #333;
}

.system-menu .cu-item {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  min-height: 100rpx;
  justify-content: space-between;
  border-bottom: 1rpx solid #f0f0f0;
  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: unset;
    .cuIcon {
        margin-right: 10rpx;
    }
  }
}

.system-menu .cu-item:last-child {
  border-bottom: none;
}

.system-menu .cu-item.arrow:after {
  content: "\e6a3";
  font-family: "cuIcon";
  color: #8799a3;
  margin-right: 10rpx;
}

.cu-bar.tabbar.foot {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1024;
  box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
}
</style>
